/**
 * 系统管理 菜单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">菜单管理</div>
      <el-col :span="4"> </el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <span>树形菜单</span>
        </div>
        <el-tree
          class="treeclass"
          ref="tree"
          :data="treeData"
          :default-expand-all="true"
          :props="defaultProps"
          @node-click="nodeclick"
          check-strictly
          node-key="id"
        ></el-tree>
      </el-col>
      <el-col :span="18">
        <div class="mod-btnbox">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addModule"
            >添加</el-button
          >
        </div>
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="父级菜单" prop="parentId">
            <el-select
              size="small"
              v-model="form.parentId"
              placeholder="请选择"
              class="selectw"
            >
              <el-option
                v-for="parm in fmenu"
                :key="parm.id"
                :label="parm.name"
                :value="parm.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单名称" prop="name">
            <el-input size="small" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input size="small" v-model="form.icon"></el-input>
          </el-form-item>
          <el-form-item label="URL" prop="url">
            <el-input size="small" v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="顺序" prop="sequence">
            <el-input size="small" v-model="form.sequence"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="saveModule('form')"
              >保存</el-button
            >
            <el-button
              size="small"
              type="primary"
              v-show="showdelete"
              @click="deleteModule"
              >删除</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  ModuleList,
  ModuleGet,
  ModuleNodes,
  ModuleSave,
  ModuleDelete,
} from "../../api/userMG";
export default {
  inject: ["reload"],

  data() {
    return {
      showdelete: false,
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      form: {
        name: "",
        url: "",
        icon: "",
        parentId: "",
        status: "00",
        order: "",
      },
      // rules表单验证
      rules: {
        parentId: [
          { required: true, message: "请选择父级菜单", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        icon: [{ required: true, message: "请输入菜单图标", trigger: "blur" }],
        url: [{ required: true, message: "请输入URL", trigger: "blur" }],
        sequence: [
          { required: true, message: "请输入菜单顺序", trigger: "blur" },
        ],
      },
      fmenu: [],
      smenu: [],
    };
  },
  /**
   * 创建完毕
   */

  created() {
    this.getParentMenu();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 初始化数据
    initData() {
      let d = [];
      for (let i = 0; i < this.fmenu.length; i++) {
        d.push({
          id: this.fmenu[i].id,
          name: this.fmenu[i].name,
          disabled: true,
          children: this.setSubMenu(this.fmenu[i].id),
        });
      }
      console.log(this.treeData);
      this.treeData = d;
    },
    //根据父级获取子级菜单
    setSubMenu(id) {
      let d = [];
      for (let i = 0; i < this.smenu.length; i++) {
        if (this.smenu[i].parentId == id) {
          d.push({
            id: this.smenu[i].id,
            name: this.smenu[i].name,
          });
        }
      }
      return d;
    },
    // 添加
    addModule() {
      this.showdelete = false;
      this.form = {
        name: "",
        url: "",
        icon: "",
        parentId: "",
        status: "01",
        order: "",
      };
    },
    // 获取父级菜单
    async getParentMenu() {
      var d = await this.$axios.get("/menu/parentMenu");
      if (d.code == 200) {
        this.fmenu = d.data;
        this.getSubMenu();
      }
    },
    //获取子菜单
    async getSubMenu() {
      var d = await this.$axios.get("/menu/subMenu");
      if (d.code == 200) {
        this.smenu = d.data;
        this.initData();
      }
    },

    // 点击节点
    async nodeclick(arr, node, self) {
      if (arr.id == "01" || arr.id == "02") {
        return;
      }
      var d = await this.$axios.get("/menu/byId/" + arr.id);
      if (d.code == 200) {
        this.form = d.data;
        this.showdelete = true;
      } else {
        this.$message.success(d.message);
      }
    },

    // 保存菜单或者添加
    saveModule(editData) {
      if (this.showdelete) {
        this.$refs[editData].validate(async (valid) => {
          if (valid) {
            var d = await this.$axios.put("/menu/update", this.form);
            if (d.code == 200) {
              this.reload();
              this.$message.success(d.message);
            } else {
              this.$message.error(d.message);
            }
          } else {
            return false;
          }
        });
      } else {
        this.$refs[editData].validate(async (valid) => {
          if (valid) {
            var d = await this.$axios.post("/menu/add", this.form);
            if (d.code == 200) {
              this.reload();
              this.$message.success(d.message);
            } else {
              this.$message.error(d.message);
            }
          } else {
            return false;
          }
        });
      }
    },
    // 删除菜单
    async deleteModule() {
      var d = await this.$axios.delete("/menu/del/" + this.form.id);
      if (d.code == 200) {
        this.$message.success(d.message);
        this.reload();
      } else {
        this.$message.error(d.message);
      }
    },
  },
};
</script>

<style>
.user-search {
  margin-top: 20px !important;
}
.user-search td {
  margin-top: 20px !important;
}
.userRole {
  width: 100%;
}
.el-table__expanded-cell {
  padding: 0px !important;
  margin: 0px !important;
}
.modt-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f0f2f5;
  text-align: center;
  color: #334157;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}
.mod-btnbox {
  margin-bottom: 20px;
}
.treeclass {
  border: 1px solid #f3f3f3;
  padding-top: 20px;
  padding-bottom: 20px;
}
.selectw {
  width: 100%;
}
</style>
 
 